<!--
 * @Description:
 * @Author: FangYaoTang
 * @Date: 2023-08-16 09:20:20
 * @LastEditor: FangYaoTang
 * @LastEditTime: 2023-08-16 09:20:20
 * @Copyright: by 网络科技有限公司 禁止任何形式（包含二次开发）转售系统源码，违者必究。
-->


<template>
	<view class="page_content" :style="{ '--bgcolor':isBgColor }">
		<view class="head_content">
			<CustomNavbar title="转赠" color="#fff"></CustomNavbar>
		</view>
		<view class="main_content">
			<view class="top_card">
				<view class="line1">
					<view class="left">权益值转赠(需≥{{ sumMin }})</view>

				</view>
				<view class="line2">
					<!-- <text class="text">￥</text> -->
					<input class="input" type="number" v-model="params.option" placeholder="请输入转赠的数额" placeholder-class="placeholder">
				</view>
				<view class="line3">
					<view class="left">转赠至(请输入转赠的用户ID)</view>
				</view>
        <view class="line2">
        	<input class="input" type="number" v-model="params.user_id" placeholder="请输入用户ID" placeholder-class="placeholder">
        </view>
				<view class="line4 m-t-30">
					<u-button text="确认转赠" :loading="buttonLoading" :customStyle="buttonStyle" @click="withdrawHandle" />
				</view>
		
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isColor:getApp().globalData.isColor,
				isBgColor:getApp().globalData.isBgColor,
				buttonStyle: {
					width: '100%',
					height: '108rpx',
					border: 'none',
					fontSize: '32rpx',
					color: '#fff',
					background: getApp().globalData.isBgColor,
					borderRadius: '16rpx',
					margin: '0',
					fontWeight: 'bold'
				},
				buttonLoading: false,
				params: {
					user_id: '',
					option: '',
				},
				recordData: [],
				page: 1,
				sumMin: 0,
				sumMax: 5000,
        
			}
		},
		onLoad() {
			this.isColor = getApp().globalData.isColor
			this.isBgColor=getApp().globalData.isBgColor
		},
		methods: {
			
			// 权益值转赠
			withdrawHandle() {
				const num = Number(this.params.option)
				if(!num) {
					this.$u.toast('请输入权益值')
					return
				}
				if(num < this.sumMin) {
					this.$u.toast('转赠权益值需大于' + this.sumMin)
					return
				}
			
				this.buttonLoading = true
				this.$request('user.transfer', this.params).then(res => {
					if(res.code === 1) {
						this.$u.toast(res.msg)
					}
					this.buttonLoading = false
          this.params = {
            user_id: '',
            option: ''
          }
				}).catch(err => {
					this.buttonLoading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page_content {
		background: #F9F9F9;
		
		&::before {
			content: "";
			width: 100%;
			height: 420rpx;
			background:var(--bgcolor);
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.main_content {
			overflow: hidden;
			padding: 24rpx 40rpx 0 40rpx;
			display: flex;
			flex-direction: column;
			
			.top_card {
				position: relative;
				border-radius: 20rpx;
				background: #fff;
				padding: 40rpx;
				font-weight: 700;
				
				.line1 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					.left {
						font-size: 36rpx;
						color: #000;
					}
					
					.right {
						font-size: 24rpx;
						color: rgba(46, 46, 46, 1);
						display: flex;
						align-items: center;
						
						.image {
							width: 32rpx;
							margin-right: 20rpx;
						}
					}
				}
				
				.line2 {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 2rpx solid rgba(221, 221, 221, 1);
					
					.text {
						font-size: 32rpx;
						color: rgba(102, 102, 102, 1);
					}
					
					.input {
						font-size: 32rpx;
						color: #000;
					}
				}
				
				.line3 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 40rpx 0 20rpx;
					
					.left {
						font-size: 36rpx;
						color: #000;
					}
					
					.right {
						font-size: 28rpx;
						color: #FEB787;
					}
				}

			}

		}
	}
</style>
